<style>
    .ant-skeleton {
        display: table;
        width: 100%;
    }

    @keyframes ant-skeleton-loading {
        0% {
            background-position: 100% 50%
        }
        100% {
            background-position: 0 50%
        }
    }

    .ant-skeleton-header {
        display: table-cell;
        padding-right: 16px;
        vertical-align: top;
    }

    .ant-skeleton-content {
        display: table-cell;
        width: 100%;
        vertical-align: top;
    }

    .ant-skeleton-content .ant-skeleton-title {
        width: 100%;
        height: 16px;
        margin-top: 16px;
        background: #f2f2f2;
    }

    .ant-skeleton-with-avatar .ant-skeleton-content .ant-skeleton-title {
        margin-top: 12px;
    }

    .ant-skeleton.ant-skeleton-active .ant-skeleton-content .ant-skeleton-title, .ant-skeleton.ant-skeleton-active .ant-skeleton-content .ant-skeleton-paragraph > li {
        background: -webkit-gradient(linear, left top, right top, color-stop(25%, #f2f2f2), color-stop(37%, #e6e6e6), color-stop(63%, #f2f2f2));
        background: linear-gradient(90deg, #f2f2f2 25%, #e6e6e6 37%, #f2f2f2 63%);
        background-size: 400% 100%;
        -webkit-animation: ant-skeleton-loading 1.4s ease infinite;
        animation: ant-skeleton-loading 1.4s ease infinite;
    }

    .ant-skeleton.ant-skeleton-active .ant-skeleton-content .ant-skeleton-title, .ant-skeleton.ant-skeleton-active .ant-skeleton-content .ant-skeleton-paragraph > li {
        background: -webkit-gradient(linear, left top, right top, color-stop(25%, #f2f2f2), color-stop(37%, #e6e6e6), color-stop(63%, #f2f2f2));
        background: linear-gradient(90deg, #f2f2f2 25%, #e6e6e6 37%, #f2f2f2 63%);
        background-size: 400% 100%;
        -webkit-animation: ant-skeleton-loading 1.4s ease infinite;
        animation: ant-skeleton-loading 1.4s ease infinite;
    }

    .ant-skeleton-content .ant-skeleton-paragraph {
        padding: 0;
    }

    .ant-skeleton-content .ant-skeleton-title + .ant-skeleton-paragraph {
        margin-top: 24px;
    }

    .ant-skeleton-with-avatar .ant-skeleton-content .ant-skeleton-title + .ant-skeleton-paragraph {
        margin-top: 28px;
    }

    .ant-skeleton-content .ant-skeleton-paragraph > li {
        width: 100%;
        height: 16px;
        list-style: none;
        background: #f2f2f2;
    }

    .ant-skeleton-content .ant-skeleton-paragraph > li + li {
        margin-top: 16px;
    }

    .ant-skeleton-header .ant-skeleton-avatar {
        display: inline-block;
        vertical-align: top;
        background: #f2f2f2;
        width: 32px;
        height: 32px;
        line-height: 32px;
    }
    .ant-skeleton.ant-skeleton-active .ant-skeleton-avatar {
        background: -webkit-gradient(linear, left top, right top, color-stop(25%, #f2f2f2), color-stop(37%, #e6e6e6), color-stop(63%, #f2f2f2));
        background: linear-gradient(90deg, #f2f2f2 25%, #e6e6e6 37%, #f2f2f2 63%);
        background-size: 400% 100%;
        -webkit-animation: ant-skeleton-loading 1.4s ease infinite;
        animation: ant-skeleton-loading 1.4s ease infinite;
    }
    .ant-skeleton-header .ant-skeleton-avatar-large {
        width: 40px;
        height: 40px;
        line-height: 40px;
    }
    .ant-skeleton-header .ant-skeleton-avatar-small {
        width: 24px;
        height: 24px;
        line-height: 24px;
    }
    .ant-skeleton-header .ant-skeleton-avatar.ant-skeleton-avatar-circle {
        border-radius: 50%;
    }

    .ant-skeleton-header .ant-skeleton-avatar-large.ant-skeleton-avatar-circle {
        border-radius: 50%;
    }
</style>
<template>
    <div>
        <div v-if="loading" class="ant-skeleton  " :class="{'ant-skeleton-active':active,'ant-skeleton-with-avatar':avatar}">
            <div class="ant-skeleton-header" v-if="avatar"><span
                    class="ant-skeleton-avatar" :class="['ant-skeleton-avatar-'+avatarShape,'ant-skeleton-avatar-'+avatarSize]"></span></div>
            <div class="ant-skeleton-content">
                <h3 v-if="title" class="ant-skeleton-title" :style="{width:titleWidth}"></h3>
                <ul v-if="paragraph" class="ant-skeleton-paragraph">
                    <li v-for="i in rows-1"></li>
                    <li :style="{width:lastWidth }"></li>
                </ul>
            </div>
        </div>
        <slot v-if="!loading">

        </slot>
    </div>

</template>
<script>
    Rap.define('', '', function () {
        return {
            name: 'ly-skeleton',
            props: {
                active: {
                    type:Boolean,
                    'default': true
                },
                avatar:Boolean,
                avatarShape:{
                    type:String,
                    'default': 'square'//square,circle
                },
                avatarSize:{
                    type:String,
                    'default': 'default'//default,small,large
                },
                loading:{
                    type:Boolean,
                    'default': true
                },
                paragraph:{
                    type:Boolean,
                    'default': true
                },
                title:{
                    type:Boolean,
                    'default': true
                },
                titleWidth:{
                    type:Boolean,
                    'default': '50%'
                },
                rows:{
                    type:Number,
                    'default': 3
                },
                lastWidth:{
                    type:Boolean,
                    'default': '60%'
                }

            }, created: function () {
            }, methods: {}
        }
    });
</script>
